<template>
  <div class="curve_checkbox">
    <el-checkbox-group v-model="checkList" @change="changeGroup">
      <el-checkbox
        @change="val => changeBox(val, item)"
        :label="item.token"
        v-for="(item, index) in newList"
        :key="index"
      >
        {{ item.name }}
      </el-checkbox>
    </el-checkbox-group>
    <div class=" flex-x flex-center w100" @click="isOpen" v-if="newList.length">
      <div class="open_btn flex-x flex-center" v-if="open">
        <span class="el-icon-arrow-down" style="margin-right: 6px;"></span>
        收起
      </div>
      <div class="open_btn flex-x flex-center" v-else>
        <span class="el-icon-arrow-up" style="margin-right: 6px;"></span>
        展开
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  name: "CheckParameter",
  computed: {
    ...mapGetters(["controlDeviceInfo"]),
    newList() {
      if (this.open) {
        return this.list;
      } else {
        return this.list.slice(0, 5);
      }
    }
  },
  data() {
    return {
      checkList: [],
      open: true
    };
  },
  methods: {
    isOpen() {
      this.open = !this.open;
    },
    changeBox(val, row) {
      this.$emit("changeBox", {
        isCheck: val,
        ...row
      });
    },
    changeGroup(val) {
      this.$emit("changeGroup", this.checkList);
    }
  }
};
</script>

<style lang="scss" scoped>
.curve_checkbox {
  .open_btn {
    cursor: pointer;
    margin-top: 10px;
  }
  /deep/ .el-checkbox-group {
    .el-checkbox {
      width: 15%;
    }
    .el-checkbox__label {
      color: #fff;
    }
    .el-checkbox__input.is-checked + .el-checkbox__label {
      color: #409eff;
    }
  }
}
</style>
